A veces algo no resulta bien a la primera, repetimos la tarea una y otra vez y nos damos cuenta que el menor detalle por muy insignificante es el causante de nuestro error.
En todo esto de HTML, códigos y demás es importante el más mínimo detalle, a veces copiamos perfectamente para luego pegar y el editor de Blogger distorsiona nuestro código, no digamos ya si visualizamos con diferentes navegadores.
Digo todo esto porque es mi experiencia con esta galería de imágenes, pero parece ser que ya puedo mostrarla no sin antes dar las gracias a
J.Miur de
Vagabundia que es el padre de la criatura y paciente maestro a la hora de prestar ayuda. Espero que no se moleste por tomarle prestada la imagen siguiente modificada por mi.
Esta imagen es un ejemplo para entender en qué consiste la galería y las medidas a tomar en cuenta. Podéis cambiar los valores de alto y ancho de la galería pero teniendo en cuenta que la suma de los cuadros numéricos y la imagen es igual a la altura del contenedor de imágenes.
cuadros+imagen=contenedor de imágenes
Para aplicar esta galería debemos primero añadir en la CSS de nuestro blog el siguiente código:
(Yo lo añadí justo antes de ]]></b:skin> pero lo podéis añadir en cualquier otro lugar dentro de los estilos CSS es decir entre <head> y </head> )
.galleryHcontenedor {
width: 480px; /* el ancho total */
height: 400px; /* el alto total */
margin: 0px auto;
background: #EEEEEE url(URL_imagen) no-repeat scroll 0px 0px; /* la imagen por defecto */
border: 1px solid #AAAAAA;
text-align: center;
}
.galleryH {
position: relative;
width: 480px; /* el ancho de las imágenes */
margin: 360px 0px 0px 0px; /* el margen superior es igual al alto de la imagen */
padding: 0;
list-style-type: none;
}
.galleryH img {
border:none;
}
.galleryH li {
float:left;
}
/* las propiedades gráficas de los números inferiores */
.galleryH li a, .gallery li a:visited {
float: left;
width: 32px;
margin: 6px 2px 0px;
padding: 3px 0;
background-color: #FFFFFF;
border: 1px solid #444444;
color: #000000 !important;
text-decoration: none !important;
}
.galleryH li a img {
position: absolute;
visibility: hidden; /* las imágenes están ocultas */
left: 0px;
top: -360px; /* la imagen se mostrará arriba */
border: none;
}
.galleryH li a:hover {
background-color: #DDDDDD; /* efecto rollover */
}
.galleryH li a:active img, .galleryH li a:focus img {
visibility: visible; /* mostrar la imagen al hacer click */
}
.galleryH li a:active, .galleryH li a:focus {
background-color: #C2C4D0;
}
En la entrada donde deseamos aplicar la galería añadiremos el siguiente código con la url de las imágenes sin olvidar que el tamaño debe ser de 320 de ancho x 300 de alto, o en su defecto cualquier otra medida siempre que previamente modifiquemos los valores pertinentes en el código CSS de la plantilla.
<div class="galleryHcontenedor">
<ul class="galleryH">
<li><a href="javascript:void(0);">01<img src="URL_imagen01"></a></li>
<li><a href="javascript:void(0);">02<img src="URL_imagen02"></a></li>
<li><a href="javascript:void(0);">03<img src="URL_imagen03"></a></li>
<li><a href="javascript:void(0);">04<img src="URL_imagen04"></a></li>
</ul>
</div>
32
opiniones
